@import '~styles/config.scss';

.main {
    .header {
        padding: 14px 14px 0px 14px;
        display: flex;
    }

    .center {
        margin-top: -6px;
        border-top: 1px solid $--border-color-extra-light;
        overflow  : hidden;
        overflow-y: auto;
        padding:14px;


        .ul {
            display              : grid;
            grid-gap             : 10px;
            grid-template-columns: repeat(auto-fit, 285px);
        }
    
        .li {
    
            background   : #fff;
            display      : flex;
            border-radius: 6px;
            overflow     : hidden;
            padding      : 8px;
            border       : 1px solid $--border-color-extra-light;
            cursor       : pointer;
            transition   : all .3s;
    
            &.selected {
                border    : 1px solid $--color-primary;
                background: $--background-color-primary-light;
            }
    
            &.disabled {
                opacity: .5;
            }
    
            .albumUrl {
                display: block;
                width  : 100%;
                height : 100%;
    
            }
    
    
            .s1 {
                background   : $--background-color-base;
                padding      : 0px 3px;
                border-radius: 3px;
                font-size    : 12px;
                margin-right : 3px;
                border       : 1px solid $--border-color-lighter;
            }
    
            .img {
                position     : relative;
                flex         : none;
                width        : 70px;
                height       : 70px;
                overflow     : hidden;
                border-radius: 4px;
                border       : 1px solid #fff;
            }
    
    
            .text {
                position    : relative;
                flex        : auto;
                overflow    : hidden;
                padding-left: 10px;
    
                .name {
                    overflow     : hidden;
                    text-overflow: ellipsis;
                    white-space  : nowrap;
                    line-height  : 20px;
                    font-size    : 14px;
                }
    
                .content {
                    font-size  : 12px;
                    line-height: 20px;
                    color      : $--color-text-secondary;
                    overflow     : hidden;
                    text-overflow: ellipsis;
                    white-space  : nowrap;
                }
    
                .address {
                    font-size  : 12px;
                    color      : $--color-text-regular;
                    line-height: 30px;
                    overflow     : hidden;
                    text-overflow: ellipsis;
                    white-space  : nowrap;
                }
    
                .del {
                    position: absolute;
                    padding : 0px 8px;
                    height  : 20px;
                    bottom  : 5px;
                    right   : 0px;
                    color   : $--color-text-secondary;
    
                    i {
                        font-size: 12px;
                    }
    
                    &:hover {
                        color: $--color-danger;
                    }
                }
    
    
            }
    
    
        }


    }
}

.footer {
    display: flex;

    .ll {
        flex      : auto;
        text-align: left;
    }

    .rr {}
}


.kong{
    text-align: center;
    line-height:200px;
    color:$--color-text-secondary;
}